<template>
	<view>
		<qiun-title-bar title="博客类别比例" />
		<view class="charts-box">
			<qiun-data-charts type="pie" :chartData="pie" :opts="{legend:{fontSize:10}}" />
		</view>
		<qiun-title-bar title="最新博客分析" />
		<!-- 开启滚动条，需要开启拖动功能，即:ontouch="true" ，微信小程序需要开启canvas2d，否则会很卡，开启2d需要指定canvasId -->
		<view class="charts-box">
			<qiun-data-charts type="column" canvasId="scrollcolumnid"
				:opts="{enableScroll:true,xAxis:{scrollShow:true,itemCount:4,disableGrid:true,legend:{fontSize:8}}}"
				:ontouch="true" :canvas2d="true" :chartData="column" />
		</view>
		<qiun-title-bar title="常用标签词云" />
		<view class="charts-box">
			<qiun-data-charts type="word" :chartData="word" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pie: {},
				column: {},
				word: {}
			}
		},
		onLoad() {
			this.getCategoryies()
			this.getBlog()
			this.getTags()
		},
		onPullDownRefresh() {
			this.getCategoryies()
			this.getBlog()
			this.getTags()
		},
		methods: {
			getCategoryies() {
				this.pie = {
					series: [{
						data: []
					}]
				}
				let url = this.$params.host + this.$params.action_categories
				this.$request.get(url, res => {
					url = this.$params.host + this.$params.action_category_count
					let i = 0
					res.data.data.forEach(async (c) => {
						let res = await this.$request.request(url + c.id)
						if (res.success) {
							let category = {
								name: c.name,
								value: res.data
							}
							this.pie.series[0].data.push(category)
							// console.log(category);
						}
					})
				}, () => {
					uni.stopPullDownRefresh()
				})
			},
			getBlog() {
				this.column = {
					categories: [],
					series: [{
						name: "点赞量",
						data: []
					}, {
						name: "评论量",
						data: []
					}]
				}
				let url = this.$params.host + this.$params.action_blog
				this.$request.get(url, res => {
					res.data.data.forEach(b => {
						this.column.categories.push(this.$utils.ellipsis(b.title, 4))
						this.column.series[0].data.push(b.good)
						this.column.series[1].data.push(b.comments.length)
						// console.log(colums);
					})
				}, () => {
					uni.stopPullDownRefresh()
				})
			},
			getTags() {
				this.word = {
					series: []
				}
				let url = this.$params.host + this.$params.action_tags
				this.$request.get(url, res => {
					url = this.$params.host + this.$params.action_tags_count
					let i = 0
					res.data.data.forEach(async (c) => {
						let res = await this.$request.request(url + c.id)
						if (res.success) {
							let tag = {
								name: c.name,
								textSize: res.data * 10
							}
							this.word.series.push(tag)
							// console.log(category);
						}
					})
				}, () => {
					uni.stopPullDownRefresh()
				})
			}



		}
	}
</script>

<style>
	.charts-box {
		width: 100%;
		height: 500rpx;
	}

	@import url("charts.css");
</style>
